<template>
  <div class="container">
    <Navbar />
    
    <h1 class="page-title"><i class="fas fa-user-circle"></i> 个人中心</h1>
    
    <div class="profile-container">
      <div class="profile-sidebar">
        <div class="profile-avatar">
          <div class="avatar-image"></div>
          <div class="avatar-name">{{ userInfo.username }}</div>
          <div class="avatar-status">{{ userInfo.status }}</div>
        </div>
        
        <div class="profile-menu">
          <div 
            v-for="(item, index) in menuItems" 
            :key="index"
            :class="{ 'profile-menu-item': true, 'active': activeMenu === index }"
            @click="activeMenu = index"
          >
            <font-awesome-icon :icon="item.icon" />
            {{ item.name }}
          </div>
        </div>
      </div>
      
      <div class="profile-content">
        <!-- 个人资料 -->
        <div v-if="activeMenu === 0" class="profile-section">
          <h2>个人资料</h2>
          
          <div class="form-group">
            <label>用户名</label>
            <input type="text" v-model="userInfo.username">
          </div>
          <div class="form-group">
            <label>邮箱</label>
            <input type="email" v-model="userInfo.email">
          </div>
          <div class="form-group">
            <label>个人简介</label>
            <textarea v-model="userInfo.bio"></textarea>
          </div>
          <div class="form-group">
            <label>我的标签</label>
            <input type="text" v-model="userInfo.tags">
            <div class="form-hint">使用逗号分隔多个标签</div>
          </div>
          <div class="form-group">
            <label>性别</label>
            <select v-model="userInfo.gender">
              <option value="male">男</option>
              <option value="female">女</option>
              <option value="private">保密</option>
            </select>
          </div>
          
          <button class="save-button" @click="saveProfile">保存修改</button>
        </div>
        
        <!-- 我的收藏 -->
        <div v-else-if="activeMenu === 1" class="profile-section">
          <h2>我的收藏</h2>
          
          <div class="tabs">
            <div 
              v-for="(tab, index) in collectionTabs" 
              :key="index" 
              :class="{ 'tab': true, 'active': activeCollectionTab === index }"
              @click="activeCollectionTab = index"
            >
              {{ tab.name }}
            </div>
          </div>
          
          <div class="collection-list">
            <div v-if="activeCollectionTab === 0" class="card-grid">
              <div v-for="(car, index) in favoritesCars" :key="index" class="card">
                <div class="card-img" :style="{ backgroundColor: car.bgColor }">
                  <div class="card-badge">{{ car.level }}</div>
                </div>
                <div class="card-content">
                  <div class="card-title">{{ car.name }}</div>
                  <div class="card-meta">
                    <div class="card-type">{{ car.type }}</div>
                    <div class="card-rating">
                      <i class="fas fa-star"></i>
                      <span>{{ car.rating }}</span>
                    </div>
                  </div>
                  <button class="remove-button" @click.stop="removeFromFavorites('car', index)">
                    <i class="fas fa-times"></i> 取消收藏
                  </button>
                </div>
              </div>
            </div>
            
            <div v-else-if="activeCollectionTab === 1" class="card-grid">
              <div v-for="(pet, index) in favoritesPets" :key="index" class="card">
                <div class="card-img" :style="{ backgroundColor: pet.bgColor }">
                  <div class="card-badge">{{ pet.rarity }}</div>
                </div>
                <div class="card-content">
                  <div class="card-title">{{ pet.name }}</div>
                  <div class="card-meta">
                    <div class="card-type">{{ pet.type }}</div>
                    <div class="card-rating">
                      <i class="fas fa-star"></i>
                      <span>{{ pet.rating }}</span>
                    </div>
                  </div>
                  <button class="remove-button" @click.stop="removeFromFavorites('pet', index)">
                    <i class="fas fa-times"></i> 取消收藏
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 浏览历史 -->
        <div v-else-if="activeMenu === 2" class="profile-section">
          <h2>浏览历史</h2>
          
          <div class="history-list">
            <div v-for="(item, index) in historyItems" :key="index" class="history-item">
              <div class="history-item-img" :style="{ backgroundColor: item.bgColor }"></div>
              <div class="history-item-info">
                <div class="history-item-name">{{ item.name }}</div>
                <div class="history-item-meta">
                  <div class="history-item-type">{{ item.type }}</div>
                  <div class="history-item-date">{{ item.date }}</div>
                </div>
              </div>
              <button class="history-item-remove" @click="removeFromHistory(index)">
                <i class="fas fa-times"></i>
              </button>
            </div>
          </div>
          
          <button class="clear-button" @click="clearHistory">清空浏览历史</button>
        </div>
        
        <!-- 账号设置 -->
        <div v-else-if="activeMenu === 3" class="profile-section">
          <h2>账号设置</h2>
          
          <div class="settings-item">
            <div class="settings-title">修改密码</div>
            <div class="form-group">
              <label>当前密码</label>
              <input type="password" v-model="currentPassword">
            </div>
            <div class="form-group">
              <label>新密码</label>
              <input type="password" v-model="newPassword">
            </div>
            <div class="form-group">
              <label>确认新密码</label>
              <input type="password" v-model="confirmNewPassword">
            </div>
            <button class="save-button" @click="changePassword">修改密码</button>
          </div>
          
          <div class="settings-item">
            <div class="settings-title">通知设置</div>
            <div class="settings-toggle">
              <label>
                <span>接收系统通知</span>
                <input type="checkbox" v-model="notificationSettings.system">
              </label>
            </div>
            <div class="settings-toggle">
              <label>
                <span>接收评论通知</span>
                <input type="checkbox" v-model="notificationSettings.comments">
              </label>
            </div>
            <div class="settings-toggle">
              <label>
                <span>接收活动通知</span>
                <input type="checkbox" v-model="notificationSettings.activities">
              </label>
            </div>
            <button class="save-button" @click="saveNotificationSettings">保存设置</button>
          </div>
          
          <div class="settings-item">
            <div class="settings-title danger">注销账号</div>
            <p class="settings-description">
              注销账号将删除您的所有数据，该操作不可逆，请谨慎操作。
            </p>
            <button class="danger-button" @click="confirmDeleteAccount">注销账号</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
/**
 * 用户个人中心页组件
 * @component UserProfile
 */
import { ref } from 'vue'
import Navbar from '../../components/Navbar.vue'

// 侧边栏菜单
const menuItems = ref([
  { name: '个人资料', icon: ['fas', 'user'] },
  { name: '我的收藏', icon: ['fas', 'heart'] },
  { name: '浏览历史', icon: ['fas', 'history'] },
  { name: '账号设置', icon: ['fas', 'cog'] }
])
const activeMenu = ref(0)

// 用户信息
const userInfo = ref({
  username: '飞车爱好者',
  email: 'user@example.com',
  bio: '热爱QQ飞车的玩家',
  tags: '赛车,漂移,竞速',
  gender: 'male',
  status: '正常'
})

// 收藏标签页
const collectionTabs = [
  { name: '赛车' },
  { name: '宠物' }
]
const activeCollectionTab = ref(0)

// 模拟数据 - 收藏的赛车
const favoritesCars = ref([
  { name: '雷诺特技车', type: 'A车', level: 'S级', rating: '4.9', bgColor: '#3a6eff' },
  { name: '福特野马', type: 'B车', level: 'A级', rating: '4.7', bgColor: '#ff5252' },
  { name: '保时捷911', type: 'A车', level: 'S级', rating: '4.8', bgColor: '#ffaa00' }
])

// 模拟数据 - 收藏的宠物
const favoritesPets = ref([
  { name: '闪电精灵', type: '速度型', rarity: '传说', rating: '4.9', bgColor: '#9c27b0' },
  { name: '烈焰兽', type: '攻击型', rarity: '稀有', rating: '4.6', bgColor: '#e91e63' }
])

// 模拟数据 - 浏览历史
const historyItems = ref([
  { name: '雷诺特技车', type: '赛车', date: '2023-08-15 12:30', bgColor: '#3a6eff' },
  { name: '闪电精灵', type: '宠物', date: '2023-08-14 16:45', bgColor: '#9c27b0' },
  { name: '福特野马', type: '赛车', date: '2023-08-14 10:20', bgColor: '#ff5252' },
  { name: '烈焰兽', type: '宠物', date: '2023-08-13 19:15', bgColor: '#e91e63' }
])

// 账号设置
const currentPassword = ref('')
const newPassword = ref('')
const confirmNewPassword = ref('')
const notificationSettings = ref({
  system: true,
  comments: true,
  activities: false
})

// 保存个人资料
const saveProfile = () => {
  alert('个人资料保存成功!')
}

// 从收藏中移除
const removeFromFavorites = (type, index) => {
  if (type === 'car') {
    favoritesCars.value.splice(index, 1)
  } else {
    favoritesPets.value.splice(index, 1)
  }
}

// 从历史记录中移除
const removeFromHistory = (index) => {
  historyItems.value.splice(index, 1)
}

// 清空历史记录
const clearHistory = () => {
  if (confirm('确定要清空所有浏览历史吗？')) {
    historyItems.value = []
  }
}

// 修改密码
const changePassword = () => {
  if (!currentPassword.value || !newPassword.value || !confirmNewPassword.value) {
    alert('请填写完整信息')
    return
  }
  
  if (newPassword.value !== confirmNewPassword.value) {
    alert('两次输入的新密码不一致')
    return
  }
  
  alert('密码修改成功!')
  currentPassword.value = ''
  newPassword.value = ''
  confirmNewPassword.value = ''
}

// 保存通知设置
const saveNotificationSettings = () => {
  alert('通知设置已保存!')
}

// 确认删除账号
const confirmDeleteAccount = () => {
  if (confirm('确定要注销账号吗？此操作不可恢复，所有数据将被永久删除。')) {
    alert('账号已注销')
    // 此处应该跳转到登出页面或首页
  }
}
</script>

<style scoped>
.profile-container {
  display: flex;
  gap: 30px;
  margin-top: 20px;
}

.profile-sidebar {
  width: 250px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.profile-avatar {
  padding: 30px 20px;
  text-align: center;
  border-bottom: 1px solid #eee;
}

.avatar-image {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #ddd;
  margin: 0 auto 15px;
}

.avatar-name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.avatar-status {
  font-size: 14px;
  color: #666;
}

.profile-menu {
  padding: 10px 0;
}

.profile-menu-item {
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.profile-menu-item:hover {
  background: #f5f7fa;
}

.profile-menu-item.active {
  background: #e6f0ff;
  color: #0078ff;
  font-weight: bold;
}

.profile-content {
  flex: 1;
  background: white;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  padding: 30px;
}

.profile-section h2 {
  margin-bottom: 25px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  color: #666;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.form-group textarea {
  min-height: 100px;
  resize: vertical;
}

.form-hint {
  font-size: 12px;
  color: #888;
  margin-top: 5px;
}

.save-button {
  background: #0078ff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

.tabs {
  display: flex;
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
}

.tab {
  padding: 10px 20px;
  cursor: pointer;
}

.tab.active {
  color: #0078ff;
  font-weight: bold;
  border-bottom: 2px solid #0078ff;
}

.remove-button {
  margin-top: 10px;
  background: #f5f5f5;
  border: 1px solid #ddd;
  color: #666;
  border-radius: 5px;
  padding: 5px 10px;
  cursor: pointer;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

.remove-button:hover {
  background: #e0e0e0;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.history-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  background: #f9f9f9;
  border-radius: 10px;
}

.history-item-img {
  width: 60px;
  height: 60px;
  border-radius: 5px;
}

.history-item-info {
  flex: 1;
}

.history-item-name {
  font-weight: bold;
  margin-bottom: 5px;
}

.history-item-meta {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #666;
}

.history-item-remove {
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
  font-size: 16px;
}

.clear-button {
  margin-top: 20px;
  background: #f5f5f5;
  border: 1px solid #ddd;
  color: #666;
  border-radius: 5px;
  padding: 8px 15px;
  cursor: pointer;
}

.settings-item {
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid #eee;
}

.settings-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.settings-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
}

.settings-title.danger {
  color: #dc3545;
}

.settings-description {
  margin-bottom: 15px;
  color: #666;
}

.settings-toggle {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.danger-button {
  background: #dc3545;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

@media (max-width: 768px) {
  .profile-container {
    flex-direction: column;
  }
  
  .profile-sidebar {
    width: 100%;
  }
}
</style> 